@font20:20px;
@miancolor: #4294FF;
@fontcolor: #9A9A9A;
body{
    background-color: #f8f8f8;
}
main{
    height: calc(100vh - 44px - 60px -70px);
    .hei{
        height: calc(100vh - 44px - 60px -70px);
        display: none;
    };
    #container{
        height: 100%;
    }
    .running{
        .hei;
        // 累计距离
        .sumDistance{
            padding: 20px;
            height: 100px;
            background-color: #fff;
            h1{
                font-size: 48px;
                font-weight: bold;
                color: @miancolor;
                span{
                    color: #000;
                    font-weight: normal;
                }
            }
        }
        // 模式区域
        .mode{
            height: 358px;
            // 模式切换选项卡
            ul{
                top: 20px;
                z-index: 20;
                width: 100%;
                li{
                    width: 100px;
                    height: 30px;
                    background-color: #9CBCE2;
                    line-height: 30px;
                    border-radius: 20px;
                }
            };
            // go按钮
            .go{
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                height: 190px;
                width: 190px;
                border-radius: 50%;
                background-color: rgba(66, 148, 255, .5);
                line-height: 190px;
                color: #fff;
                font-size: 86px;
                font-weight: bolder;
            }
            // 底部控件
            .setting{
                bottom: 10px;
                height: 50px;
                width: 100%;
                align-items: center;
                div{
                    height: 50px;
                    width: 50px;
                    background-color: #fff;
                    border-radius: 50%;
                    box-shadow:0 -6px 10px #ccc;
                    line-height: 50px;
                    text-align: center;
                    font-size: 30px;
                    
                }
                .center{
                    width: 120px;
                    height: 40px;
                    border-radius: 20px;
                    background-color: @miancolor;
                    color: #fff;
                    line-height: 40px;
                    font-size: 16px;
                    vertical-align: middle;
                }
            }
        }
    };
    .on{
        display: block;
    }
    .none{
        display: none;
    }
}